<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="用户注册" />

    <van-field
      v-model="mobile"
      clearable
      left-icon="phone-o"
      placeholder="请输入手机号"
      class="a"
        :error-message="error.mobile"
    />

    <van-button round class="btn" @click="zhuce">同意协议并注册</van-button>
    <van-row>
      <div class="state">
        <span>

                        我已阅读并同意以下协议，接受免除或限制责任，诉讼管辖约定等条款，愿意同步创建账户

          <br />
          <a href="https://m.gome.com.cn/register_boder.html" class="c">《国美平台服务协议》</a>
          <a href="https://m.gome.com.cn/register_boder_privacy.html" class="c">《国美平台隐私政策》</a>
          <a href="https://m.gome.com.cn/meifubao_service_agreement.html" class="c">《美付宝服务协议》</a>
          <a style="display:none;" href="/privacy_policy.html" class="c">《国美隐私政策》</a>
        </span>
      </div>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mobile: '',
      error: {
        mobile: ''
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/login')
    },
    async zhuce () {
      let mobileRe = /^1(3|5|7|8|9)\d{9}$/
      if (!mobileRe.test(this.mobile)) {
        this.error.mobile = '手机号码格式不正确'
        return false
      }

      sessionStorage.setItem('mobile', this.mobile)
      this.$router.push('/registed')
      await this.$http.get('/send', { params: { mo: this.mobile } })
      // console.log(res)
    }
  }
}
</script>

<style lang='less'>
body{
  background-color: #fff;
}
.btn {
  color: #fff;
  width: 73%;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 127%;
  background: -webkit-linear-gradient(left,#FA1E8C 0,#FC1E56 100%)
}
.c {
  color: #78bee9;
  font-size: 108%;
}
.state {
  margin: 0.3rem 0 0;
  font-size: 0.24rem;
  color: #999;
  padding-left: 9%;
  margin-top: 5%;
}
.a{
    margin-top: 20px;
    font-size: 100%;
}
</style>
